<template>
  <div id="app">
    <div id="nav"></div>
    <h1>学习vue3新特性</h1>
    <input type="text" v-model="msg" />
    <br />
    <br />
    <button @click="changemsg">点击事件事件</button>

    <p>{{ msg }}</p>
    <p>{{ msgWrapper }}</p>
  </div>
</template>
<script>
import { value, computed, onMounted } from "vue-function-api";
// 同构：写一次代码在客户端和服务端都能执行
export default {
  // setup 声明周期函数比mounted先执行 
  setup() {
    console.log(1111111111111111);

    const msg = value("早"); // 响应式 数据

    // computed 计算属性
    const msgWrapper = computed(() => {
      return "----计算属性---: " + msg.value + " ++++++";
    });

    // 定义事件处理函数
    const changemsg = () => {
      msg.value = "新年好";
    };

    // 生命周期函数;

    onMounted(() => {
      console.log("新生命周期函数执行了");
    });

    return {
      msg,
      msgWrapper,
      changemsg,
    };
  },
  mounted() {
    console.log("执行了旧的mounted");
  },
};
</script>
